<template>
	<view class="noticeList">
		<view class="notice-header"></view>
		<view class="cardBox">
			<u-card margin="30rpx" :show-head="false" :show-footer="false"
				box-shadow="0px 3rpx 8rpx 0px rgba(0, 0, 0, 0.06)" v-for="(item,index) in noticeList" :key="index">
				<view class="card-body" slot="body" @click="noticeDetail(index)">
					<view class="card-image">
						<u-image src="@/static/home/notice/laba.png" width="39rpx" height="46rpx"></u-image>
					</view>
					<view class="card-content">
						<view class="card-content-title">{{item.title}}</view>
						<view class="card-content-time">{{item.createDate}}</view>
					</view>
				</view>
			</u-card>
		</view>
		<u-mask :show="show" :mask-click-able="false">
			<view class="warp">
				<view class="rect">
					<view class="notice-header"></view>
					<view class="notice-content">
						<view class="notice-title">{{noticeDetails.title}}</view>
						<u-parse :html="noticeDetails.content" :tag-style="style"></u-parse>
					</view>
					<view class="notice-footer">
						<u-button shape="circle" type="primary" class="noticeBtn" @click="lejie">我已了解</u-button>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				noticeDetails: '',
				noticeList: [],
				style: {
					p: 'font-size:24rpx;color:#646464',
					span: 'font-size: 24rpx;color:#646464',
					image: 'dispaly:none'
				}
			}
		},
		mounted() {
			this.getData()
		},
		onPullDownRefresh() {
			this.noticeList = [];
			this.getData();
		},
		methods: {
			getData() {
				this.$u.api.noticeList().then(res => {
					if (res.code == 0) {
						this.noticeList = res.data;
					}
				});
			},
			noticeDetail(index) {
				this.noticeDetails = this.noticeList[index];
				this.show = true;
			},
			//我已了解
			lejie() {
				this.show = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.noticeList {
		.notice-header {
			background-image: url(@/static/home/notice/bg.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 220rpx;
			width: 100%;
		}

		.cardBox {
			margin-top: -90rpx;

			.card-body {
				display: flex;

				.card-image {
					margin-right: 30rpx;
				}

				.card-content {
					.card-content-title {
						font-size: 30rpx;
						color: #333333;
						font-weight: 400;
					}

					.card-content-time {
						color: #999999;
						font-size: 24rpx;
					}
				}
			}
		}

		.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;

			.rect {
				background: #FFFFFF;
				box-shadow: 2rpx 6rpx 51rpx 0px rgba(55, 127, 166, 0.3);
				border-radius: 20rpx;
				width: 629rpx;

				.notice-header {
					width: 629rpx;
					height: 259rpx;
					background-image: url(@/static/home/noticeDetailBg.png);
					background-repeat: no-repeat;
					background-size: 100% 100%;

				}

				.notice-content {
					padding: 30rpx;

					.notice-title {
						font-size: 30rpx;
						font-weight: 500;
						color: #000;
						text-align: center;
						margin-bottom: 35rpx;
					}
				}

				.notice-footer {
					padding: 30rpx;

					.noticeBtn {
						background: #1F6ECF;
						box-shadow: 0px 12rpx 16rpx 0px rgba(28, 100, 224, 0.32);
						border-radius: 37rpx;
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>
